import React, {useEffect, useState} from 'react';

const LoadImageUrl = () => {

  const [img, setImage] = useState();

  useEffect(() => {
    const checkImageUrl = async () => {
      const response = await fetch('https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg');
      // console.log("response xx", response.blob());

      const contentType = response.headers.get('content-type') || '';
      const isImage = contentType.startsWith('image/');

      console.log("isImage xx", isImage);
      if (isImage) {
        return response.blob()
      } else {
        return undefined
      }
    }
    checkImageUrl().then(
      (res) => {
        setImage(URL.createObjectURL(res));
      }
    );
  }, [])

  // const obj = {
  //   body: ReadableStream,
  //   bodyUsed: false,
  //   headers: {},
  //   ok: true,
  //   redirected: false,
  //   status: 200,
  //   statusText: "",
  //   type: "cors",
  //   url: "https://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg",
  // }


  return (
    <div>
      {
        img !== undefined ? (
          <img src={img}></img>
        ) : <p>加载图片</p>
      }
    </div>
  );
};

export default LoadImageUrl;
